<template>
  <div class="container">
    <div class="opt-area-02">
      <div class="left-con">
        <div class="input-frame" style="width: 12vw">
          <Select v-model="params.hspc_table_name" placeholder="核酸轮次" filterable>
            <Option v-for="obj in dicList" :value="obj.value" :key="obj.id">{{obj.label}}</Option>
          </Select>
        </div>
        <Button type="info" @click="selectlist(1)" style="margin-top: 0px;margin-right:10px">搜索</Button>
        <Button type="info" @click="selectlist(1)" style="margin-top: 0px;margin-right:10px">刷新</Button>
      </div>
      </div>
      <Table :loading="countData.loading" class="hs-table-div" border :columns="columns" :data="dataList" size="small" ref="table">
      </Table>
      <Row v-if="loadData == true">
        <Col class="demo-spin-col" span="8" offset="8">
          <Spin fix>
            <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
            <div>数据正在加载</div>
          </Spin>
        </Col>
      </Row>
  </div>
</template>

<script>

import { findLabelList, findTongList } from '@/api/grid'
import trueIocn from '@/assets/images/true-iocn.png'
import falseIocn from '@/assets/images/false-iocn.png'

export default {
  name: 'index',
  components: {
  },
  data () {
    return {
      loadData: true,
      dataList: [],
      trueIocn,
      falseIocn,
      columns: [
        { title: '机构名称', key: 'company_name', align: 'center', fixed: 'left' },
        { title: '总数', key: 'allnum', align: 'center' },
        { title: '已处置', key: 'cz_num', align: 'center' },
        { title: '使用他人健康码', key: 'tr_num', align: 'center' },
        { title: '第三方检测机构', key: 'ds_num', align: 'center' },
        { title: '其他', key: 'other_num', align: 'center' },
        { title: '其他应检', key: 'other_yj', align: 'center' },
        { title: '其他不应检', key: 'other_byj', align: 'center' },
        { title: '未检测', key: 'wjc_num', align: 'center' },
        { title: '失联', key: 'sl_num', align: 'center' },
        { title: '离沈', key: 'ls_num', align: 'center' }
      ],
      dicList: [],
      countData: {
        loading: false
      },
      time: '',
      severUserInfo: {},
      userInfo: {},
      userOverall: {},
      controlData: {
        show1: false,
        uploadHeader: false,
        readType: 1, // 读取当前人员信息的方式 0未读取 1输入卡号 2读身份证 3人脸对比
        cardnoInput: '',
        showDetail: false,
        photo: '',
        personTags: []
      },
      params: {
        hspc_table_name: '0'
      },
      nucleic_name: ''
    }
  },
  watch: {
    'params.hspc_table_name' (val) {
      this.dicList.forEach(item => {
        if (item.value === val) {
          this.nucleic_name = item.label
          console.log(this.nucleic_name, '2342342342343243')
        }
      })
    }
  },
  methods: {
    init () {
      findTongList(this.params).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.loadData = false
          this.dataList = ret.data.data
          this.dataList.forEach(item => {
            item['hspc_table_name'] = this.nucleic_name
          })
          this.countData.loading = false
          this.params.totalRecord = ret.data.data.totalRecord
        } else {
          this.loadData = false
          this.$Notice.error({
            title: '查询列表信息失败',
            desc: ret.data.errmsg
          })
        }
      })
    },
    selectlist (e) {
      this.init()
    },
    getDicInfo () {
      findLabelList().then(ret => {
        if (ret.data.errcode === 0) {
          this.dicList = ret.data.data
          this.dicList.forEach(item => {
            if (item.value > this.params.hspc_table_name) {
              this.params.hspc_table_name = item.value
            }
          })
          this.init()
        } else {
          this.$Notice.error({ title: '获取字典列表失败', desc: '' })
        }
      })
    }
  },
  mounted () {
    // this.severUserInfo = this.$store.state.user.severUserInfo
    this.getDicInfo()
    // this.countDown(3)
    // this.initModal.isshow = true
  }
}
</script>

<style scoped>
.input-frame {
  width: 120px;
  margin-right: 10px;
  float: left;
}
.opt-area-02 {
  display: flex;
  align-items: center;
  flex-direction: column;
  border: 1px solid #abdcff;
  background-color: #f0faff;
  padding: 8px 16px 8px 16px;
  border-radius: 4px;
  margin: 5px;
  margin-bottom: 10px;
}
.opt-area-02 .right-con {
  width: 100%;
  margin-top: 5px;
  display: flex;
}
.opt-area-02 .left-con {
  font-size: 14px;
  width: 100%;
}
.opt-area-02 .left-con span {
  font-weight: bold;
}
.opt-area-02 .right-con input {
  width: 150px;
  margin-right: 10px;
}
.opt-area-02 .right-con .input-frame {
  width: 200px;
  margin-right: 10px;
}
.table-action-btn {
  margin-bottom: 3px;
}
.container >>> .ivu-btn-small {
  height: 24px;
  padding: 0 5px;
  font-size: 12px;
  border-radius: 3px;
}
.mp10 {
  margin-right: 10px;
}
.mb20 {
  margin-bottom: 20px;
}
.ivu-table-row {
  height: 57px;
}
.demo-spin-icon-load{
  animation: ani-demo-spin 1s linear infinite;
}
@keyframes ani-demo-spin {
  from { transform: rotate(0deg);}
  50%  { transform: rotate(180deg);}
  to   { transform: rotate(360deg);}
}
.hs-table-div {
  margin: 5px;
}
</style>
